
<*
* 订单管理
* orderManage
* edit by ZHANGKE
*>

<template>
  <div class="order-manage-section">
    <!--订单管理 orderManage -->
    <el-form :inline="true" :model="sForm" class="demo-form-inline" size="mini">
      <el-form-item label="订单编号/标题：">
        <el-input v-model="sForm.keyWord" size="mini" clearable></el-input>
      </el-form-item>
      <el-form-item label="订单时间：" class="order-manage-item">
        <el-date-picker
                size="mini"
                v-model="sForm.sDate"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="timestamp"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="订单状态：">
        <el-select size="mini" v-model="sForm.payStatus" placeholder="请选择" clearable value="">
          <el-option
                  v-for="item in orderStatus"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" @click="searchOrder">查询</el-button>
      </el-form-item>
    </el-form>
    <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
      <el-tab-pane label="全部" name="all">
        <el-table
                :data="tableOrderData"
                border
                style="width: 100%">
          <el-table-column
                  prop="orderNo"
                  label="订单编号"
                  width="150">
          </el-table-column>
          <el-table-column
                  prop="createTimeMy"
                  label="订单时间"
                  width="">
            <template slot-scope="scope">
              <div>
                {{scope.row.createTimeMy && scope.row.createTimeMy[0]}}
              </div>
              <div >
                {{scope.row.createTimeMy && scope.row.createTimeMy[1]}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
                  prop="title"
                  label="订单标题"
                  width="">
          </el-table-column>
          <el-table-column
                  prop="totalPrice"
                  label="订单价格"
                  width="">
          </el-table-column>
          <el-table-column
                  prop="finalPrice"
                  label="实付金额"
                  width="80">
          </el-table-column>
          <el-table-column
                  prop="orderStatusMy"
                  label="订单状态"
                  width="">
          </el-table-column>
          <el-table-column
                  prop="payTypeMy"
                  label="支付方式"
                  width="">
          </el-table-column>
          <el-table-column
                  prop="payStatusMy"
                  label="支付状态"
                  width="">
          </el-table-column>
          <el-table-column
                  prop="moduleJsonMy"
                  label="功能"
                  width="120">
            <template slot-scope="scope">

              <div v-for="ii in scope.row.moduleJsonMy" :key="ii.id">
                <i :class="ii.icon"></i>
                <span style="margin-left: 5px">{{ii.name}}</span>
                <span style="margin-left: 6px">{{ii.price}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
                  prop="remark"
                  label="操作"
                  width="200">
            <template slot-scope="scope">
              <el-button type="text" @click="goToInvoice(scope.row)">开票</el-button>|
              <el-button type="text" @click="goToInvoice(scope.row)">活动</el-button>|
              <el-button type="text" @click="orderDetail(scope.row)">详情</el-button>|
              <el-button type="text" @click="orderCancel(scope.row)">取消订单</el-button>
              <span v-if="scope.row.payStatus === 0">{{scope.row.restTime}}</span>
              <el-button type="text" @click="goToPay(scope.row)">去支付</el-button>
            </template>
          </el-table-column>

        </el-table>

        <el-pagination
                v-if="personListTotalAll > 0"
                class="pagination-part"
                background
                @current-change="changePageAll"
                :current-page.sync="currentPageAll"
                :page-size="pageSizeAll"
                layout="prev, pager, next"
                :total="personListTotalAll">
        </el-pagination>



      </el-tab-pane>
      <el-tab-pane :label="'未支付('+tableUnpaidData.length+')'" name="unpaid">
        <el-table
                :data="tableUnpaidData"
                border
                style="width: 100%">
          <el-table-column
                  prop="orderNo"
                  label="订单编号"
                  width="">
          </el-table-column>
          <el-table-column
                  prop="createTimeMy"
                  label="订单时间"
                  width="">
            <template slot-scope="scope">
              <div>
                {{scope.row.createTimeMy && scope.row.createTimeMy[0]}}
              </div>
              <div >
                {{scope.row.createTimeMy && scope.row.createTimeMy[1]}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
                  prop="title"
                  label="订单标题"
                  width="">
          </el-table-column>
          <el-table-column
                  prop="totalPrice"
                  label="订单价格"
                  width="">
          </el-table-column>
          <el-table-column
                  prop="finalPrice"
                  label="实付金额"
                  width="">
          </el-table-column>
          <el-table-column
                  prop="orderStatusMy"
                  label="订单状态"
                  width="">
          </el-table-column>
          <el-table-column
                  prop="payTypeMy"
                  label="支付方式"
                  width="">
          </el-table-column>
          <el-table-column
                  prop="payStatusMy"
                  label="支付状态"
                  width="">
          </el-table-column>
          <el-table-column
                  prop="moduleJsonMy"
                  label="功能"
                  width="120">
            <template slot-scope="scope">

              <div v-for="ii in scope.row.moduleJsonMy" :key="ii.id">
                <i :class="ii.icon"></i>
                <span style="margin-left: 5px">{{ii.name}}</span>
                <span style="margin-left: 5px">{{ii.price}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
                  prop="remark"
                  label="操作"
                  width="200">
            <template slot-scope="scope">
              <el-button type="text" @click="goToInvoice(scope.row)">开票</el-button>|
              <el-button type="text" @click="goToInvoice(scope.row)">活动</el-button>|
              <el-button type="text" @click="orderDetail(scope.row)">详情</el-button>|
              <el-button type="text" @click="orderCancel(scope.row)">取消订单</el-button>
              <span v-if="scope.row.payStatus === 0">{{scope.row.restTime}}</span>
              <el-button type="text" @click="goToPay(scope.row)">去支付</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane :label="'已支付('+tablePaymentedData.length+')'" name="paymented">
        <el-table
                :data="tablePaymentedData"
                border
                style="width: 100%">
          <el-table-column
                  prop="orderNo"
                  label="订单编号"
                  width="">
          </el-table-column>
          <el-table-column
                  prop="createTimeMy"
                  label="订单时间"
                  width="">
            <template slot-scope="scope">
              <div>
             {{scope.row.createTimeMy && scope.row.createTimeMy[0]}}
              </div>
              <div >
              {{scope.row.createTimeMy && scope.row.createTimeMy[1]}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
                  prop="title"
                  label="订单标题"
                  width="">
          </el-table-column>
          <el-table-column
                  prop="totalPrice"
                  label="订单价格"
                  width="">
          </el-table-column>
          <el-table-column
                  prop="finalPrice"
                  label="实付金额"
                  width="">
          </el-table-column>
          <el-table-column
                  prop="orderStatusMy"
                  label="订单状态"
                  width="">
          </el-table-column>
          <el-table-column
                  prop="payTypeMy"
                  label="支付方式"
                  width="">
          </el-table-column>
          <el-table-column
                  prop="payStatusMy"
                  label="支付状态"
                  width="">
          </el-table-column>
          <el-table-column
                  prop="moduleJsonMy"
                  label="功能"
                  width="120">
            <template slot-scope="scope">

              <div v-for="ii in scope.row.moduleJsonMy" :key="ii.id">
                <i :class="ii.icon"></i>
                <span style="margin-left: 5px">{{ii.name}}</span>
                <span style="margin-left: 5px">{{ii.price}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
                  prop="remark"
                  label="操作" width="200">

          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>


    <modal title="订单详情" :visible="orderDetailVisible" :width="650" @close="orderDetailVisible=false">
      <el-form ref="form" :model="orderDetailData" label-width="120px">
        <el-form-item label="订单标题：">
          {{orderDetailData.payDto.title}}
        </el-form-item>
        <el-form-item label="实付金额：">
          {{orderDetailData.finalPrice}}
        </el-form-item>
        <el-form-item label="支付状态：">
          {{orderDetailData.payStatusMy}}
        </el-form-item>
        <el-form-item label="支付方式：">
          {{orderDetailData.payTypeMy}}
        </el-form-item>
        <el-form-item v-if="orderDetailData.bankPayDetail" label="银行转账详情：">
          <div >
            银行卡号：
            {{orderDetailData.bankPayDetail.cardNum}}
          </div>
          <div >
            手机号码：
            {{orderDetailData.bankPayDetail.tel}}
          </div>
          <div >
            用户名：
            {{orderDetailData.bankPayDetail.userName}}
          </div>
        </el-form-item>
        <el-form-item label="活动形式：">
          {{orderDetailData.payDto.title}}
        </el-form-item>

      </el-form>
     <div style="text-align: center;">
       <el-button type="primary" @click="orderDetailVisible=false">确定</el-button>
     </div>
    </modal>

  </div>
</template>

<script>
  import { isRealNum } from '../../../utils/util';
  import moment from 'moment';

  export default {
    name: 'orderManage',
    data() {
      return {
        orderStatus: [
          { label: '全部', code: '' },
          { label: '未支付', code: '0' },
          { label: '已付款', code: '1' },
        ],
        //payStatus: 3, describe: '支付中'},success:{payStatus: 1, describe: '支付成功'}, fal:{payStatus: 0, describe: '支付失败'}
        sForm:{},
        activeName:'all',
        currentPageAll:1,
        pageSizeAll:10,
        personListTotalAll:100,
        orderDetailVisible:false,
        orderDetailData:{payDto:{}},
        tableOrderData:[
          {
            id:'503200',
            orderId: '2003320190729181300893',
            name: '测试数据',
            code: 'Is0fLdo3WCv',
            prizeName:'--',
            prize:'笔记本',
            isGot:'已领取',
            payStatus:1,
            oPerson:'张三',
            remark:'--'
          }],
        payStatusList:{
          0:'未支付',
          1:'已付款'
        },
        payTypeList:{
          0:'微信',
          1:'支付宝',
          2:'银行转账'
        },
        orderStatusList:{
          0:'未完成',
          1:'已完成',
          2:'已失效'
        }
      };
    },
    created(){

    },
    mounted(){
      this.searchOrder()
    },
    computed: {
      tablePaymentedData: function () {
        //已支付
        return this.tableOrderData.filter(item => item.payStatus === 1)
      },
      tableUnpaidData: function () {
        // 未支付
        return this.tableOrderData.filter(item => item.payStatus === 0)
      }
    },
    methods: {
      handleTabClick(){

      },
      changePageAll(i){
        this.currentPageAll = i;
        this.searchOrder()
      },
      searchOrder(){
        let startData = this.sForm.sDate? this.sForm.sDate[0]:'',
                endData = this.sForm.sDate? this.sForm.sDate[1]:'';
        let param ={
          keyWord:this.sForm.keyWord,
          startData:startData,
          endData:endData,
          payStatus:this.sForm.payStatus,
          index:this.currentPageAll
        };


        this.$api.post('/order/query', param, success => {
          if(success.result){
            this.personListTotalAll = success.totalCount;
            this.currentPageAll = success.pageIndex;
            this.tableOrderData = success.result.map(item => {
              if(item.detail && typeof item.detail ==='string'){
                item.moduleJsonMy =  JSON.parse(item.detail)
              }
              if(item.createTime){
                item.createTimeMy = (moment(item.createTime).format("YYYY-MM-DD HH:mm:ss")).split(' ')
              }
              if(isRealNum(item.payStatus)){
                item.payStatusMy = this.payStatusList[item.payStatus]
              }
              if(isRealNum(item.payType)){
                item.payTypeMy = this.payTypeList[item.payType]
              }
              if(isRealNum(item.orderStatus)){
                item.orderStatusMy = this.orderStatusList[item.orderStatus]
              }
              //moment.locale('zh-cn')
              // let e = moment(item.useEndDate).diff(moment(item.useStartDate), 'days')
              // let a = moment(item.useEndDate);
              // let b = moment(item.useStartDate);
              // let c = a.from(b) // "a day ago"
              // let d = moment("2012-02", "YYYY-MM").daysInMonth() // 29
              // let f = this.dateCalculation(item.useEndDate - item.useStartDate)
              let value = moment() - item.createTime, prefix = '还剩';
              if(value < 0){
                prefix  = '超期';
                value = Math.abs(value)
              }
              item.timeDown =  prefix + this.TimeDown(value);
              // item.restTime =
              return item
            })
          }
        }, fal => {
          this.$message.error(fal);
        });
      },
      goToPay(){
        //去支付
      },
      goToInvoice(row){
        //开票
        this.$router.push({ path: '/container/invoiceManage', query: { sceneId: row.sceneId} });
      },
      dateCalculation (second){
        if (second > 0) {
          var day = 0;
          var hour = 0;
          var minute = 0;
          var data = {};
          let totalSeconds = parseInt((second) / 1000);
          minute = Math.floor(totalSeconds / (60))
          if (parseInt(minute) > 60) {
            hour = parseInt(minute / 60);
            minute %= 60; //算出有多分钟
          }
          if (parseInt(hour) > 24) {
            day = parseInt(hour / 24);
            hour %= 24; //算出有多分钟
          }
          data.day = day;
          data.hour = hour;
          data.minute = minute;
          return data;
        }
      },
      /**
       * @return {string}
       */
      TimeDown(times) {
        //相差的总秒数
        let totalSeconds = parseInt((times) / 1000);
        //天数
        let days = Math.floor(totalSeconds / (60 * 60 * 24));
        //取模（余数）
        let modulo = totalSeconds % (60 * 60 * 24);
        //小时数
        let hours = Math.floor(modulo / (60 * 60));
        modulo = modulo % (60 * 60);
        //分钟
        let minutes = Math.floor(modulo / 60);
        //秒
        let seconds = modulo % 60;

        //return  days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";
        return  days + "天" + hours + "小时"
      },
      orderCancel(row){
        this.$api.get('/order/cancle', {orderNo:row.orderNo}, success => {
          this.$message.success('取消成功');
        })
      },
      orderDetail(row){
        let rowObj = {
          createTimeMy:row.createTimeMy,
          payTypeMy:row.payTypeMy,
          orderStatusMy:row.orderStatusMy,
          bankPayDetail:row.bankPayDetail ? JSON.parse(row.bankPayDetail):null,
          detail:row.detail ? JSON.parse(row.detail) :{}
        };
        this.$api.get('/order/detail', {orderNo:row.orderNo}, success => {
          if(success){
              this.orderDetailVisible = true;
             _.extend(this.orderDetailData, success, rowObj)
          }else {
            this.orderDetailData = rowObj
          }
        })
      }
    },
  };
</script>

<style lang="scss">

  .order-manage-section{
    background-color: #fff;
    margin: 20px !important;
    border-radius: 20px;
    padding: 10px 20px;
    overflow: auto;
    height: 100%;
    width: 100%;
    .order-manage-item{
      .el-date-editor--daterange.el-input__inner{
        width: 220px;
      }
    }

    .el-table__body-wrapper{
      .el-table__row{
        &>td:nth-child(1){
          &>.cell{
            user-select: text;
          }
        }
      }
    }


    .el-button + .el-button{
      margin-left: 0;
    }
    .pagination-part{
      text-align:center;
    }
  }

</style>